<template>
	<div class="TipsPopup"> 
		<van-popup v-model="tpShow" overlay-class="TP_popup" get-container=".TipsPopup">
			<div class="tp_title">
				{{title}}
			</div>
			
			<!-- 单行内容提示文案 -->
			<div v-if="textType == 'text'" class="tp_text">
				{{text}}
			</div>
			
			<!-- 多行内容提示文案 -->
			<div v-if="textType == 'html'" class="tp_html" v-html="text">
			</div>
			
			
			<button @click="buttonMethods" v-if='button'>{{buttonText}}</button>
			
			<img @click="tpShow = false" class="close" src="../assets/components/close.png" alt="">
		</van-popup>
	</div>
</template>

<script>
	export default{
		name:'TipPopup',
		data(){
			return{
				//是否显示
				tpShow:false,
				
				//标题
				title:"提示",
				
				//文字内容
				text:"",
				
				//文字类型 text 单行文本  html 多行文本标签
				textType:"text",
				
				//底部按钮是否显示
				button:false,
				
				//按钮文字
				buttonText:"",
				
			}
		},
		methods:{
			open(option){
				// console.log("option",option)
				this.tpShow = true
				this.title = option.title ? option.title  : '提示'
				this.text = option.text
				this.textType = option.textType ? option.textType : 'text'
				
				this.button = option.button
				
				// 腹肌传递的按钮文案
				this.buttonText = option.buttonText
				
				//父级传递的方法
				this.buttonMethods = option.methods ? option.methods : ""
				
			},
			//父级传递的方法
			buttonMethods(){
				
			}
		}
	}
</script>

<style lang="less">
	.TipsPopup{
		.van-popup{
			padding-top: .48rem;
			padding-bottom: .52rem;
			overflow: inherit;
			background-color: transparent;
			width: 5.84rem;
			height: auto;
			background-image: url(../assets/components/tip_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		
		.tp_title{
			color: #94E9FF;
			font-size: .36rem;
			text-align: center;
			margin-bottom: .68rem;
		}
		
		.tp_text,.tp_html{
			color: #94E9FF;
			font-size: .3rem;
		}
		
		.tp_text{
			text-align: center;
		}
		
		.tp_html{
			width: 4rem;
			margin: auto;
			font-size: .28rem;
		}
		
		button{
			display: block;
			margin: auto;
			margin-top: .62rem;
			font-size: .24rem;
			width:1.2rem;
			height:.45rem;
			background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));
			border-radius:.1rem;
			border: none;
			outline: none;
		}
		
		.close{
			position: absolute;
			bottom:-1.6rem;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	
</style>
